<script setup lang="ts">
	//  defineProps<{
	//    icon: string,
	//    label?: string,
	//    smallText: boolean,
	// txt:
	//  }>()
	const props = defineProps({
		icon: {
			type: String,
			default: null
		},
		label: {
			type: String,
			default: null
		},
		smallText: {
			type: Boolean,
			default: null
		},
		txtcolor: {
			type: String,
			default: 'white'
		},
	})
	const emit = defineEmits(['click'])

	function onClick() {
		emit('click')
	}
</script>

<template>
	<view class="game-btn" :class="{ 'small-text': smallText }" @click="onClick">
		<image class="btn-icon" :src="`/static/owo/icon-btn/game-btn-${icon}.png`"></image>
		<!-- <text class="btn-label" :style="{'color':txtcolor}">{{ label }}</text> -->
		<button open-type="share" class="shareBtn" v-if="label=='分享'"></button>
	</view>
</template>

<style scoped>
	.game-btn {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 88rpx;
		gap: 2px;
		line-height: 100%;
		position: relative;
	}

	.game-btn.small-text {
		width: 24px;
	}

	.game-btn.small-text .btn-label {
		font-size: 8px;
	}

	.game-btn.small-text .btn-icon {
		width: 88rpx;
		height: 88rpx;
	}

	.btn-label {
		color: white;
		font-size: 10px;
	}

	.btn-icon {
		width: 88rpx;
		height: 88rpx;
	}

	.shareBtn {
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		z-index: 99;
	}
</style>